<template>
  <div class="border-line card">
    <header-title title="保租房运营主体情况" @fullScreen="handleFullScreen"></header-title>
    <div class="card-content">
      <echarts-view ref="echarts" :options="option" height="320px"></echarts-view>
    </div>
  </div>
</template>

<script>
import headerTitle from './headerTitle'
import { echartsView } from '@/components'
import axios from 'axios'

export default {
  props: {
    isFullscren: {
      type: Boolean,
      default: false,
    },
    areaID: {
      type: Number,
      default: 0,
    },
  },
  components: {
    headerTitle,
    echartsView,
  },
  data() {
    return {
      option: {},
    }
  },
  mounted() {
    this.fetchData()
  },
  watch: {
    areaID: function () {
      this.fetchData()
    },
  },
  methods: {
    fetchData() {
      const that = this
      const hx = axios.get(`http://222.85.201.111:8026/api/statistics/Get_KB_FWHX?RegionNO=${this.areaID}`)
      const mj = axios.get(`http://222.85.201.111:8026/api/statistics/Get_KB_FWmj?RegionNO=${this.areaID}`)
      Promise.all([hx, mj])
        .then((res) => {
          that.option = {
            color: ['rgba(31, 164, 248, 1)', 'rgba(255, 228, 0, 1)', 'rgba(249, 90, 0, 1)', 'rgba(27, 199, 139, 1)'],
            tooltip: {
              trigger: 'item',
              confine: true,
            },
            legend: {
              headerTitleorient: 'vertical',
              headerTitleleft: 'right',
              left: 'left',
              width: '20px',
              bottom: 100,
              textStyle: {
                color: '#ffffff',
                fontSize: 26,
              },
              formatter: function (name) {
                return name
              },
              itemStyle: {
                borderWidth: 4,
              },
            },
            series: [
              {
                name: '户型面积',
                type: 'pie',
                radius: ['35%', '50%'],
                avoidLabelOverlap: false,
                center: ['50%', '35%'],
                label: {
                  show: true,
                  position: 'outside',
                  color: '#ffffff',
                  formatter: '{b} : {c}套',
                },
                tooltip: {
                  valueFormatter: function (value) {
                    return value + '套'
                  },
                },
                labelLine: {
                  show: true,
                },
                // data: res[0].data,
                data: [
                  { value: 43, name: '运营单位总数' },
                  { value: 2, name: '企业' },
                  { value: 2, name: '区级平台公司' },
                  { value: 2, name: '市级平台公司' },
                ],
              },
            ],
          }
        })
        .catch(function (error) {
          this.$message.error(`网络请求错误，请稍后重试！错误信息：${error}`)
        })
    },
    handleFullScreen() {
      this.$emit('fullScreen')
    },
  },
}
</script>
<style lang="less" scoped>
.card {
  height: 280px;
  &-content {
    margin-top: 10px;
    font-size: 16px;
    p {
      text-indent: 30px;
    }
  }
  .border-line-bottom {
    font-size: 18px;
    // float: right;
    width: 100%;
    text-align: center;
    margin-top: -120px;
    span {
      font-weight: 600;
      font-size: 30px;
    }
  }
}
</style>
